<template>
	<view class="wrap">
		<view class="header">
		  <view class="main">
		    <image :src="userInfo.avatarUrl" mode="aspectFill"></image>
        <view class="info">
           <view class="phone">
             <text>{{userInfo.phone || ''}}</text>
             <button class="btn" v-if="userInfo.phone">修改</button>
           </view>
           <view class="nick-name">{{userInfo.nickName}}</view>
        </view>
		  </view>
      <view class="usiable">
        <text>可用余额：¥ {{userInfo.balance || '0.00'}} </text><button class="withdraw btn">提现</button>
        <!-- <text>积分：158 </text> -->
      </view>
      <view class="balance-detail">余额明细</view>
      <view class="point-detail">积分明细</view>
		</view>
    <view class="card" v-if="shopInfo.id">
       <view class="title" @click="toOrderList">
         <label>店铺订单管理</label><text>查看更多</text><text class="iconfont icon-xiangyou"></text>
       </view>
       <view class="menus">
         <view class="item" v-for="(item, index) in menus" @click="toOrderList(item)" :key="index">
           <image :src="item.icon" mode="aspectFill"></image>
           <text>{{item.title}}</text>
         </view>
       </view>
    </view>
    
    <navigator url="/pages/myAddress/myAddress" class="cell">
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-my-address.png" mode="aspectFill"></image>
      <text class="title">我的地址</text>
      <text class="iconfont icon-xiangyou"></text>
    </navigator>
    <navigator url="/pages/shopCenter/shopCenter" class="cell" v-if="shopInfo.id">
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-my-shop.png" mode="aspectFill"></image>
      <text class="title">管理店铺</text>
      <text class="iconfont icon-xiangyou"></text>
    </navigator>
    <navigator url="/pages/createShop/createShop" class="cell" v-else>
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-my-shop.png" mode="aspectFill"></image>
      <text class="title">申请店铺</text>
      <text class="iconfont icon-xiangyou"></text>
    </navigator>
    <view class="cell">
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-user-feedback.png" mode="aspectFill"></image>
      <text class="title">用户反馈</text>
      <text class="iconfont icon-xiangyou"></text>
    </view>
    <view class="cell">
      <image src="https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-online-service.png" mode="aspectFill"></image>
      <text class="title">在线客服</text>
      <text class="iconfont icon-xiangyou"></text>
    </view>
    <!-- <button type="warn" class="logout">退出登录</button> -->
    <tab-menu :current="3"/>
	</view>
</template>

<script>
  import TabMenu from '@/components/tab-menu.vue'
  import {utils, numeral} from '@/utils'
  import {User, Shop} from '@/apis'
	export default {
    components: {TabMenu},
		data() {
			return {
				userInfo: {
        },
        shopInfo: {},
        menus: [{
          status: 1,
          title: '待支付',
          icon: 'https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-status1.png'
        }, {
          status: 2,
          title: '已支付',
          icon: 'https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-status2.png'
        }, {
          status: 3,
          title: '待归还',
          icon: 'https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-status3.png'
        }, {
          status: 4,
          title: '已完成',
          icon: 'https://sunchang.oss-cn-beijing.aliyuncs.com/weixin/img/icon-status4.png'
        }]
			};
		},
    mounted () {
    },
    onShow () {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        // this.userInfo = userInfo
        // 获取用户全部信息
        User.getUserByOpenid({
          data: {
            openid: userInfo.openid
          }
        }).then(res => {
          console.log('获取用户详细信息')
          console.log(res)
          // 处理余额
          res.data.body.balance = numeral(res.data.body.balance).divide(100).format('0.00')
          this.userInfo = utils.assignWithoutNull(userInfo, res.data.body)
          wx.setStorageSync('userInfo', userInfo);
          this.getUserShop()
        }).catch(err => console.error(err))
      } else {
        // 跳转到授权
        utils.routerTo('/pages/auth/auth')
      }
    },
    methods: {
      toOrderList (item) {
        utils.routerTo(`/pages/shopManage/shopManage${item.status ? `?status=${item.status}` : ''}`)
      },
      getUserShop () {
        Shop.getUserShopDetail({
          data: {
            form: {},
            query: {
              id: this.userInfo.id
            },
            pagination: {}
          }
        }).then(res => {
          console.log('获取店铺信息')
          console.log(res.data)
          this.shopInfo = res.data.body
          res.data.body && uni.setStorageSync('shopInfo', res.data.body)
        })
      }
    }
	}
</script>

<style lang="scss">
.page {
  margin-bottom: 100rpx;
}
.header {
  position: relative;
  width: 100%;
  background-color: #FF4A4A;
  box-sizing: border-box;
  padding: 40rpx;
  .main {
    box-sizing: border-box;
    display: flex;
    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: #EEE;
    }
    .info {
      flex: 1;
      box-sizing: border-box;
      padding-left: 20rpx;
      .nick-name {
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 1.5;
      }
      .phone {
        color: #FFFFFF;
        font-size: 24rpx;
        display: flex;
        text {
          padding-right: 20rpx;
        }
      }
    }
  }
  .usiable {
    font-size: 24rpx;
    padding-top: 40rpx;
    box-sizing: border-box;
    color: #FFFFFF;
    display: flex;
    text {
      padding-right: 20rpx;
      &:last-child {
        margin-left: auto;
      }
    }
    .withdraw {
      flex-shrink: 0;
      margin: unset;
    }
  }
  .balance-detail {
    position: absolute;
    right: 0;
    top: 128rpx;
    width: 166rpx;
    height: 48rpx;
    line-height: 48rpx;
    border-radius: 24rpx 0 0 24rpx;
    border: #FFF 1rpx solid;
    color: #FFFFFF;
    font-size: 24rpx;
    text-align: center;
    border-right: 0;
  }
  .point-detail {
    position: absolute;
    right: 0;
    top: 60rpx;
    width: 166rpx;
    height: 48rpx;
    line-height: 48rpx;
    border-radius: 24rpx 0 0 24rpx;
    border: #FFF 1rpx solid;
    color: #FFFFFF;
    font-size: 24rpx;
    text-align: center;
    border-right: 0;
  }
}
.card {
    border-top: #EFEFEF 20rpx solid;
    border-bottom: #EFEFEF 20rpx solid;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 0 20rpx;
    .title {
      position: relative;
      font-size: 28rpx;
      display: flex;
      height: 88rpx;
      align-items: center;
      border-bottom: #EFEFEF 1rpx solid;
      label {
        flex: 1;
      }
      text {
        color: #666;
        font-size: 24rpx;
      }
    }
    .menus {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      
      .item {
        width: 80rpx;
        padding-top: 20rpx;
        padding-bottom: 10rpx;
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        align-items: center;
        margin-right: 130rpx;
        &:nth-child(4n) {
          margin-right: 0;
        }
        image {
          width: 54rpx;
          height: 54rpx;
          background-color: #EFEFEF;
        }
        text {
          padding-top: 10rpx;
        }
      }
    }
  }
.btn {
  font-size: 24rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding: 0 10rpx;
  margin: unset;
  border-radius: 10rpx;
  border: #08D3FF 1rpx 0 1rpx 1rpx solid;
  color: #08D3FF;
  background-color: transparent;
}
.cell {
  box-sizing: border-box;
  padding: 0 20rpx;
  display: flex;
  height: 96rpx;
  background-color: #FFFFFF;
  font-size: 28rpx;
  align-items: center;
  margin-top: 2rpx;
  .title {
    flex: 1;
    padding-left: 10rpx;
  }
  .iconfont {
    color: #666;
  }
  image {
    width: 40rpx;
    height: 40rpx;
  }
}
.logout{
  width: 710rpx;
  margin: 50rpx auto;
  margin-bottom: 150rpx;
}
page {
  background-color: #EFEFEF;
}
</style>
